<template>
  <div class="crossBorderShopCar-wrap">
    <div class="tab-whole">
      <van-tabs
        :ellipsis="false"
        class="first-tabs"
        line-width="27px"
        line-height="2px"
        type="line"
        :border="false"
        v-model="activeOne"
        v-if="cateListOne && cateListOne.length > 0"
        @click="handleClickCateOne">
        <van-tab v-for="(item, index) in cateListOne" :title="item.name" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div>
      <div class="car-middle">
        <div class="car-middle-wrap">
            <div
              v-if="carLists.length > 0"
              v-for="(lists_vo, index) in carLists"
              :key="index"
              class="checkbox-item letter-list"
              :class="is_dz_fq? 'roomItemBg':''"
            >
              <van-checkbox-group
                v-model="lists_vo.checkResult"
                @change="handleChangeEvent(lists_vo, index)"
                ref="checkboxGroup">
                <p class="crossBorder_title" v-if="lists_vo.list.length > 0">{{lists_vo.title}}</p>
                <div class="gys_info" v-if="lists_vo.is_duodian && lists_vo.new_supplier_id > 0">
                  <img class="gys_logo" v-if="lists_vo.gys_logo" :src="lists_vo.gys_logo" alt />
                  <span>{{lists_vo.gys_name}}</span>
                  <img class="arrow" src="https://img.wifenxiao.com/h5-wfx/images/arrow_R.png" alt="">
                </div>
                <div class="car_main" :class="[lists_item.give_item && lists_item.give_item.item_id ? 'gift' : '', crossBorderObj.is_show_goods_address == 1 ? 'pdbx100' : '']" v-for="(lists_item, indexItem) in lists_vo.list" :key="indexItem">
                  <van-checkbox
                    class="checkbox-item"
                    :name="lists_item.cart_id||lists_item.item_id"
                    icon-size="18px"
                    checked-color="#F42B2B">
                  </van-checkbox>
                  <div class="car-middle-wrap-item">
                    <div class="car-goods">
                      <div @click="JumpName('item-detail', lists_item.item_id, lists_item.supplier_id )">
                        <div class="car-goods-img">
                          <img :src="lists_item.is_compress == 1 ?`${lists_item.pic_url}180x180`:lists_item.pic_url"
                               alt />
                        </div>
                      </div>

                      <div class="car-goods-info">
                        <div class="title" @click="JumpName('item-detail', lists_item.item_id, lists_item.supplier_id)">
                          <div class="type">
                            <b v-if="lists_item.is_self_support"
                               class="activity">自营</b>

                          </div>
                          {{lists_item.title}}
                        </div>
                        <div class="sku">
                          <p v-if="lists_item.item_date"
                             style="color: #999"
                             class="mgt5">日期：{{lists_item.item_date}}</p>
                          <p v-if="lists_item.item_memo"
                             style="color: #999">{{lists_item.item_memo}}</p>
                          <p v-if="lists_item.props">
                            <em>{{lists_item.props}}</em>
                          </p>
                          <p v-if="lists_item.package_label">
                            <i class="onePrice">{{lists_item.package_label}}</i>
                          </p>
                        </div>

                        <div class="activity-tips">
                          <b v-if="lists_item.is_miao"
                             class="activity">限时{{lists_item.actives_title}}</b>

                          <b v-else-if="lists_item.discount && lists_item.discount != '10' && !lists_item.package_org_price"
                             class="activity"
                             v-text="lists_item.is_limit_discount?lists_item.discount_sta==1?`限时会员 ¥${lists_item.discount}`:`限时会员${lists_item.discount}折`:`会员${lists_item.discount}折`"></b>

                          <b v-else-if="lists_item.is_bargin"
                             class="activity">砍价</b>
                          <b v-else-if="lists_item.is_bmd"
                             class="activity">多买优惠</b>
                        </div>

                        <div class="price clearfix">
                          <div>
                            <div class="price-now fl"
                                 v-html="scaleGoodsPriceFn(lists_item.price)"></div>
                            <!-- <span class="price-origin fl">{{mSymbol.name}}{{lists_item.original_price}}</span> -->
                          </div>

                          <div class="add fr">
                            <count-plug v-model="lists_item.num"
                                        :disabled="disabled"
                                        :itemId="lists_item.item_id"
                                        :key="lists_item.cart_id"
                                        :cartId="lists_item.cart_id"
                                        :skuId="String(lists_item.sku_id)"
                                        :maxLimit="Number(lists_item.quota) || 0 "
                                        @changeShopCarNum="changeNum"></count-plug>
                            <div class="purchase_num" v-if="lists_item.restricted_purchase">{{lists_item.restricted_purchase}}</div>
                          </div>
                        </div>
                        <div class="price-yue" v-if="crossBorderObj.dz_isCrossBorderPrice"><span class="price-about">约<span class="price-yue-num"> {{lists_item.price_rmb}} </span>元</span></div>
                        <!--赠品-->
                        <div class="gift" @click="JumpName('item-detail', lists_item.give_item.item_id)"
                             v-if="lists_item.give_item && lists_item.give_item.item_id">
                          <div class="gift-item">
                            <span class="icon_gift">赠品</span>
                            <span class="tit">{{ lists_item.give_item.title }}</span>
                            <span class="num">x{{ lists_item.give_item.num }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
<!--                  <div class="review-storeAddress" v-if="crossBorderObj.is_show_goods_address == 1" @click="showSelfAddressDialog(lists_item)">查看门店地址</div>-->
                </div>
              </van-checkbox-group>
                <!-- 底部按钮 -->
              <div class="car-bottom" v-if="lists_vo.list.length > 0">
                <div class="car-packages"
                     :style="`bottom: ${navBarHeight}px`">
                  <!-- 凑单弹窗 -->
<!--                  <div class="active-item">-->
<!--                    <add-on-item :checkedList="checkedList" ref="addOnItems" :subtractPrice="totalPrice" @refreshFn="refreshFn"></add-on-item>-->
<!--                  </div>-->
                  <div class="car-package-num">
                    <div class="car-checkbox">
                      <van-checkbox
                        v-model="lists_vo.checkAll"
                        icon-size="18px"
                        checked-color="#F42B2B"
                        @click="checkAll(lists_vo,index)">
                        <span class="check-txt">全选</span>
                      </van-checkbox>
                    </div>
                  </div>
                  <div class="car-package-price" v-if="!editStatus">
                    <div class="price">
                      <div class="price-top">
                        <p><span>合计: </span><span v-html="scaleGoodsPriceFn(lists_vo.price_total, 'package')"></span></p>
                        <p v-if="crossBorderObj.dz_isCrossBorderPrice"><span>约<span>{{lists_vo.price_total_rmb}}</span>元</span></p>
                      </div>
                    </div>
                    <div class="btn">
                      <div class="btn-buy red-gra-btn" @click="handleClickSettlement(lists_vo)">
                        <span v-if="is_dhs_send==1">出货</span>
                        <span v-else>去结算</span>
                      </div>
                    </div>
                  </div>

                  <div class="car-package-price delete-con" v-else>
                    <div class="btn-delete danger-btn" @click="handleClickDelItem(lists_vo)">
                      <span>删除</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if='carLists.length == 0 && catListLength > 0'>
              <no-goods :dataName="dataName"></no-goods>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Checkbox, CheckboxGroup, Dialog, Popup } from 'vant'
  Vue.use(Checkbox).use(CheckboxGroup).use(Dialog).use(Popup)
  import { scaleGoodsPrice } from '@/utils/index.js'
  import { setCartItemNum, delCartItem } from '@/api/item/item.js'
  import addOnItem from '../addOnItem/index'
  import CountPlug from '@/components/CountPlug'
  import { mapGetters } from 'vuex'
  import { Tab, Tabs } from 'vant'
import noGoods from '../noGoods/index'

  Vue.use(Tab)
  Vue.use(Tabs)
  export default {
    name: 'index',
    components: {
      CountPlug,
      addOnItem,
      noGoods
    },
    props: {
      Lists: {
        default: () => {
          return []
        }
      },
      crossBorderObj: {
        default: {}
      },
      editStatusDZ: {
        default: false
      },
    },
    watch: {
      Lists(val) {
        this.catListLength = 0
        this.originalCarList = val
        if (this.originalCarList.length > 0) {
          this.cateListOne = []
          // 获取默认购物车的一级分类type
          this.cateType = this.originalCarList[0].cart_type
          this.dataName = this.originalCarList[0].title
          this.originalCarList.forEach((item) => {
            // 获取 购物车的一级分类
            const obj = {
              name: item.title,
              type: item.cart_type
            }
            this.cateListOne.push(obj)
            // 数据返回对象，转换成数组
            this.itemArr = []
            if (Object.prototype.toString.call(item.list).toLowerCase() == '[object object]') {
              for (const i in item.list) {
                this.itemArr.push(item.list[i])
              }
              item.list = this.itemArr
            } else {
              item.list = []
            }
            this.catListLength += item.list ? item.list.length : 0

            // 获取默认购物车的一级分类type 的数据
            if (item.cart_type == this.cateType) {
              this.carLists = item.list
            }
            if (this.carLists.length == 0) {
              document.querySelector('#navbar').style.display = 'block'
            } else {

            }
          })
        }
      },
      editStatusDZ(val) {
        this.editStatus = val
      }
    },
    data() {
      return {
        result: [],
        is_dz_fq: 0,
        navBarHeight: 0,
        disabled: true, // 步进器禁止点击
        checkedList: [], // 选中的商品
        is_dhs_send: 0,
        editStatus: false, // 编辑状态
        checked: false, // 全选
        carLists: [],
        originalCarList: [],
        price_total: 0,
        price_total_rmb: 0,
        activeOne: 0,
        cateListOne: [],
        itemArr: [],
        cateType: 1,
        catListLength: 0,
        dataName: ''
      }
    },
    computed: {
      ...mapGetters(['navStyle', 'mSymbol']), // 0为纯文字导航
      totalPrice() { // 计算总价
        const lists = this.carLists
        const result = this.result
        let sum = 0
        const sumArr = []
        // 广州加个番茄 定制
        if (!this.is_dz_fq) {
          lists.forEach(item => {
            item.content.forEach(itemSub => {
              result.forEach(it => {
                if (it == itemSub.cart_id) {
                  sumArr.push(parseFloat(itemSub.price) * parseInt(itemSub.num))
                }
              })
            })
          })
        } else {
          lists.forEach(item => {
            for (const i in item.item_room_lists) {
              item.item_room_lists[i].forEach(itemSub => {
                result.forEach(it => {
                  if (it == itemSub.cart_id) {
                    sumArr.push(parseFloat(itemSub.price) * parseInt(itemSub.num))
                  }
                })
              })
            }
          })
        }
        sumArr.forEach((val, index, arr) => {
          sum += val
        })
        return sum
      },
      totalNum() {
        const lists = this.carLists
        const result = this.result
        let num = 0
        const numArr = []
        // 广州加个番茄 定制
        if (!this.is_dz_fq) {
          lists.forEach(item => {
            item.content.forEach(itemSub => {
              result.forEach(it => {
                if (it == itemSub.cart_id) {
                  numArr.push(parseInt(itemSub.num))
                }
              })
            })
          })
        } else {
          lists.forEach(item => {
            for (const i in item.item_room_lists) {
              item.item_room_lists[i].forEach(itemSub => {
                result.forEach(it => {
                  if (it == itemSub.cart_id) {
                    numArr.push(parseInt(itemSub.num))
                  }
                })
              })
            }
          })
        }
        numArr.forEach((val, index, arr) => {
          num += val
        })
        return num
      }
    },
    created() {
    },
    methods: {
      handleClickCateOne(index) {
        // 获取 购物车仓库类型
        this.cateType = this.cateListOne[index].type
        // 根据仓库类型查找当前类型对应的数据
        this.originalCarList.forEach((item) => {
          if (item.cart_type == this.cateType) {
            this.dataName = item.title
            if (item.list.length > 0) {
              this.carLists = [...item.list]
            } else {
              this.carLists = [...[]]
            }
          }
        })
      },
      scaleGoodsPriceFn(price) {
        return scaleGoodsPrice(price, 'large')
      },
      // 加减数量
      changeNum(agr) {
        const params = {
          num: agr[0],
          item_id: agr[2],
          sku_id: agr[3]
        }
        setCartItemNum(params).then(res => {
          if (res.status == 1) {
          } else {
            this.$Error(res.msg)
          }
        })
      },
      refreshFn() {
      },
      checkAll(item, index) {
        this.price_total = 0
        this.price_total_rmb = 0
        if (item.checkAll) {
          this.carLists[index].checkResult = []
          this.carLists[index].list.forEach((item) => {
            this.carLists[index].checkResult.push(item.cart_id || item.item_id)
            this.price_total += (item.price - 0) * 100 * item.num
            this.price_total_rmb += (item.price_rmb - 0) * 100 * item.num
          })
          this.carLists[index].price_total = this.price_total / 100
          this.carLists[index].price_total_rmb = this.price_total_rmb / 100
          this.$forceUpdate()
        } else {
          this.carLists[index].price_total = 0
          this.carLists[index].checkResult = []
          this.$forceUpdate()
        }
      },
      handleChangeEvent(item, index) {
        if (item.checkResult.length == item.list.length) {
          item.checkAll = true
        } else {
          item.checkAll = false
        }
        this.price_total = 0
        this.price_total_rmb = 0
        item.checkResult.forEach((item) => {
          this.carLists[index].list.forEach((item1) => {
            if (item == item1.cart_id || item == item1.item_id) {
              this.price_total += (item1.price - 0) * 100 * item1.num
              this.price_total_rmb += (item1.price_rmb - 0) * 100 * item1.num
            }
          })
        })
        this.carLists[index].price_total = this.price_total / 100
        this.carLists[index].price_total_rmb = this.price_total_rmb / 100
        this.$forceUpdate()
      },
      // 跳转
      JumpName(url, id, supplier_id) {
        const data = {}
        data.detailId = id
        if (supplier_id) {
          data.supplier = supplier_id
        }
        this.$JumpName(this, url, data)
      },
      handleClickSettlement(item) {
        if (item.checkResult.length <= 0) {
          this.$Error('请选择需要结算的商品')
          return false
        } else {
          this.$emit('crossPay', item)
        }
      },
      handleClickDelItem(item) {
        Dialog.confirm({
          message: '确定删除?',
          className: 'common-confirm',
          closeOnClickOverlay: true
        }).then(() => {
          // on confirm
          const data = {}
          data.id = item.checkResult
          delCartItem(data).then(res => {
            if (res.status == 1) {
              this.activeOne = 0
              this.$emit('refreshPage', true)
            }
          })
        }).catch(() => {
          // on cancel
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .crossBorderShopCar-wrap{
    .van-tabs--line .van-tabs__wrap{
      height: 72px;
    }
    .van-tab{
      line-height: 72px;
      font-size: 24px;
      color:#999;
      &.van-tab--active{
        font-size:24px;
        color:#333;
        font-weight:bold;
      }
    }
    .van-tabs__wrap--scrollable{
      .van-tab{
        flex: 0 0 auto;
      }
      .van-tabs__nav--complete{
        padding-left:28px;
        padding-right:28px;
      }
    }
    .van-tabs__line{
      background:transparent;
    }
    .first-tabs{
      .van-tab{
        padding:10px 32px 10px 8px;
        font-size:28px;
        border: none;
        &.van-tab--active{
          font-size:32px;
          .van-tab__text{
            position:relative;
            overflow:hidden;
            &::after{
              position:absolute;
              bottom:0;
              left:0;
              right:0;
              margin:auto;
              content:"";
              width: 56px;
              height: 4px;
              background: #F7454C;
            }
          }
        }
      }
    }
    .car-middle {
      &-wrap {
        margin: 20px 24px 0 24px;
        .letter-list {
          padding: 30px 0 0;
          margin-bottom: 20px;
          background: #fff;
          /*background: red;*/

          border-radius: 20px;
          .gys_info{
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            align-items: center;
            padding-left: 88px;
            .gys_logo{
              width: 32px;
              margin-right: 16px;
            }
            span{
              display: inline-block;
              max-width: 220px;
              font-weight: bold;
              font-size: 28px;
              @include showEllipsis
            }
            .arrow{
              width: 10px;
              margin-left: 16px;
            }
          }
          .car_main{
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            align-items: center;
            padding: 30px 20px;
            border-bottom: 1px solid #eee;
            position: relative;
            &.gift{
              padding: 30px 20px 84px;
            }
            &:first-child{
              padding-top: 0;
            }
            &:last-child{
              border-bottom: none;
            }
            &.pdbx100 {
              padding-bottom: 100px;
            }
            .review-storeAddress {
              position: absolute;
              right: 20px;
              bottom: 24px;
              color: #fff;
              background: #F42B2B;
              padding: 12px 26px;
              border-radius: 50px;
            }
          }
          &.letterpd{
            padding-left: 20px;
            padding-bottom: 30px;
          }
          .checkbox-item{
            flex: 0 40px;
            justify-content: center;
            margin-right: 20px;
          }
        }
        &-item {
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          .car-checkbox {
            margin-right: 20px;
            margin-top: 60px;
          }
          .car-goods {
            flex: 1;
            display: flex;
            flex-direction: row;
            &-img {
              width: 180px;
              height: 180px;
              overflow: hidden;
              border-radius: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            &-info {
              margin-left: 14px;
              flex: 1;
              position: relative;
              .title {
                @include lineClamp(28px,36px,2);
                color: #333;
                // padding-bottom: 10px;
                height: 72px;
                overflow: hidden;
                .type {
                  display: inline-block;
                  b {
                    display: inline-flex;
                    color: #fff;
                    background: $warning;
                    line-height: 24px;
                    border-radius: 15px;
                    padding: 4px 8px;
                    font-size: 22px;
                  }
                }
              }
              .sku {
                padding: 0 4px;
                font-size: 24px;
                color: #9a9a9a;
                line-height: 1;
                margin-bottom: 10px;
                .onePrice{
                  display: inline-block;
                  color: #fff;
                  padding: 2px 4px;
                  margin-top: -5px;
                  font-size: 24px;
                  border-radius: 6px;
                  line-height: 24px;
                  /*background: -moz-linear-gradient(right,#FCB700,#FC4D00);*/
                  @include gradient(right, #FFAD00, #FF8901);
                }
              }
              //活动标签
              .activity-tips{
                .activity {
                  display: inline-flex;
                  font-size: 22px;
                  line-height: 24px;
                  padding: 4px 8px;
                  margin-right: 10px;
                  margin-bottom: 12px;
                  border-radius: 24px;
                  @include btnGroup($fontDefault, $bgDefault);
                }
              }
              .price {
                // position: absolute;
                // left: 0;
                // bottom: 0;
                width: 100%;
                line-height: 40px;
                &-scale {
                  font-size: 24px;
                  color: #f42b2b;
                }
                &-origin {
                  font-size: 24px;
                  color: #999;
                  text-decoration: line-through;
                  margin-left: 10px;
                }
                .add {
                  // flex: 1;
                  // position: absolute;
                  // right: 20px;
                  // bottom: 10px;
                  // width: 250px;
                }
              }
              .gift{
                position: absolute;
                left: 0;
                bottom: -54px;
                width: 100%;
                &-item{
                  display: flex;
                  align-items: center;
                  .icon_gift{
                    display: inline-block;
                    font-size: 18px;
                    color: #fff;
                    width: 62px;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    background-color: #ff4d4f;
                    border-radius: 6px;
                    margin-right: 12px;
                  }
                  .tit, .num{
                    display: inline-block;
                  }
                  .tit{
                    width: 276px;
                    margin-right: 30px;
                    line-height: 36px;
                    @include showEllipsis;
                  }
                }
              }
            }
          }
        }
        &.failed_goods_list {
          // opacity: 0.5;
          background: #fff;
          border-radius: 20px;
          .btn-qk {
            overflow: hidden;
            padding: 30px;
            p {
              float: left;
              font-size: 28px;
              color: #333333;
            }
            .qkbtn {
              float: right;
              font-size: 28px;
              color: #666666;
              padding-left: 35px;
              background-image: url("https://img.wifenxiao.com/h5-wfx/images/item/shop-car/delete.png");
              background-size: 30px 32px;
              background-position: left center;
              background-repeat: no-repeat;
            }
          }
          .title {
            color: #999;
          }
          .price-scale {
            color: #999;
          }
          .detail_logo{
            font-size: 28px;
            text-align: center;
            padding: 0 0 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            .detail_content{
              padding:0 10px;
              color: #999;
            }
            .liner_detail{
              height: 1px;
              width: 100px;
              background: #ccc;
              margin-top: 4px;
            }
          }
        }
      }
    }
    .car-bottom {
      position: relative;
      .active-item{
        position: absolute;
        width: 100%;
        top: -80px;
      }
      .car-packages {
        width: 100%;
        /*position: fixed;*/
        /*bottom: 100px;*/
        /*left: 0;*/
        /*background: #fff;*/
        padding: 11px 0;
        border-top: 1px solid #ddd;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &.style2 {
          bottom: 100px;
        }
        .check-txt {
          color: #333333;
          font-size: 28px;
        }
        &-num {
          padding-left: 26px;
          padding-top: 10px;
          width: 150px;
          span {
            line-height: 60px;
          }
          .count {
            @include alignTop;
          }
        }
        &-price {
          /*max-width: 500px;*/
          display: flex;
          flex-direction: row;
          position: relative;
          background-color: white;
          float: right;
          &.delete-con{
            height: 77px;
          }
          .price {
            flex: 1;
            // text-align: right;
            /*padding-left: 37px;*/
            &-top {
              padding-top:4px;
              // color: $warning;
              font-size: 24px;
              line-height: 36px;
              text-align: left;
              &-yf {
                font-size: 24px;
                /*color: #999;*/
                text-align: left;
                .price-about{
                  // margin-left: 50px;
                  span{
                    font-size: 30px;
                    color: #F21228;
                    font-weight: 500;
                  }
                }
              }
            }
          }
          .btn {
            /*margin-right: 25px;*/
            margin-left: 50px;
            &-buy {
              font-weight: bold;
              font-size: 28px;
              color: #fff;
              width: 150px;
              line-height: 76px;
              text-align: center;
              border-radius: 38px;
              margin-top: 2px;
              .j-totalNum{
                font-weight: bold;
              }
            }
            &-delete {
              width: 136px;
              height: 60px;
              font-size: 26px;
              color: $warning;
              border: 2px solid $warning;
              background: #fff;
              text-align: center;
              border-radius: 30px;
              line-height: 60px;
              float: right;
              margin-top: 6px;
              position: absolute;
              right: 20px;
            }
          }
        }
      }
    }
    .crossBorder_title{
      font-size: 28px;
      font-weight: 500;
      text-indent: 30px;
    }
    .price-yue{
      font-size: 18px;
      .price-yue-num {
        font-size: 20px;
        font-weight: 500;
        color: #F21228;
      }
    }
  }
.tab-whole {
  padding: 10px;
  background: #fff;
}
</style>
